<template>
  <div :class="['play-list-box',{'show':show}]">
    <div class="topbigbox">
      <div class="topbox">
        <div class="leftbox" @click.left="leavePlayList">
          <i class="iconfont icon-zuo"></i>
        </div>
        <div class="rightbox">
          <i class="iconfont icon-sousuo"></i>
          <i class="iconfont icon-gengduo"></i>
        </div>
      </div>
      <div class="itrbox">
        <div class="imgbox">
          <img :src="prop.coverImgUrl" alt />
        </div>
        <div class="itr">
          <div class="title">{{prop.name}}</div>
          <div class="author" v-if="prop.creator">
            <div class="facebox">
              <img :src="prop.creator.avatarUrl" alt />
            </div>
            <div class="authorname">{{prop.creator.nickname}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="listbottombox">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="itembox" v-for="(ele,index) in lists" :key="index" @click.stop="clickPlayListFun(lists,index)">
          <div class="libigbox" v-if="ele">
            <div class="number">{{index+1}}</div>
            <div class="songsdetailbox van-ellipsis">
              <div class="songsname van-ellipsis" v-if="ele.name">{{ele.name}}</div>
              <div class="songsauthor van-ellipsis">
                <div class="author" v-if="ele.singername">{{ele.singername}}</div>&nbsp;-&nbsp;
                <div class="belongs van-ellipsis" v-if="ele.alname">{{ele.alname}}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getSongDetail } from "../assets/api/personal";
export default {
  props: ["prop", "show"],
  data() {
    return {
      lists: [], //需要渲染的歌单
      offset: 0,
      loading: false,
      finished: false,
      arr: [],
    };
  },
  methods: {
    //离开歌单列表
    leavePlayList() {
      this.$emit("leavePlayListson");
      this.offset = 0;
      this.finished = false;
    },
    clickPlayListFun(list, index) {
      this.$emit("clickPlayListFunson", list, index);
    },
    onLoad() {
      if (this.prop.trackIds) {
        for (
          let i = 15 * this.offset;
          i < 15 * this.offset + 15 && i < this.prop.trackIds.length;
          i++
        ) {
          getSongDetail({ ids: this.prop.trackIds[i].id }).then((data) => {
            this.$set(this.arr, i, {
              id: data.songs[0].id,
              name: data.songs[0].name,
              singername: data.songs[0].ar[0].name,
              alname: data.songs[0].al.name,
              picUrl: data.songs[0].al.picUrl,
            });
            this.loading = false;
          });
          this.lists = this.arr;
        }
        if (this.lists.length >= this.prop.trackIds.length - 1) {
          this.finished = true;
        }
        this.offset += 1;
      }
    },
  },
  watch: {
    prop(newV) {
      this.offset = 0;
      this.lists = [];
      this.arr = [];
      this.finished = false;
      for (
        let i = 15 * this.offset;
        i < 15 * this.offset + 15 && i < newV.trackIds.length;
        i++
      ) {
        getSongDetail({ ids: newV.trackIds[i].id }).then((data) => {
          this.$set(this.arr, i, {
            id: data.songs[0].id,
            name: data.songs[0].name,
            singername: data.songs[0].ar[0].name,
            alname: data.songs[0].al.name,
            picUrl: data.songs[0].al.picUrl,
          });
          this.loading = false;
        });
        this.lists = this.arr;
      }
      this.offset += 1;
    },
  },
};
</script>

<style lang="less">
.play-list-box {
  overflow-y: scroll;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 100%;
  top: 0;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  &.show {
    left: 0 !important;
    &::before {
      left: 0 !important;
    }
  }
  &::before {
    transition: all 0.3s ease-in-out;
    content: " ";
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100%;
    position: fixed;
    filter: blur(1.5px);
    background: url(../assets/imgs/bg.jpg) rgba(0, 0, 0, 0.2) center 0 no-repeat;
    background-blend-mode: multiply;
    background-size: cover;
  }
  .topbigbox {
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: multiply;
    height: 33%;
    .topbox {
      padding: 0 16px;
      display: flex;
      padding-top: 49px;
      justify-content: space-between;
      align-items: center;
      color: white;
      i {
        font-size: 22px;
        height: 22px;
        width: 22px;
      }
      .rightbox {
        i {
          &:first-child {
            margin-right: 34px;
          }
        }
      }
    }
    .itrbox {
      padding: 0 16px;

      margin-top: 26px;
      display: flex;
      .imgbox {
        width: 118px;
        height: 118px;
        border-radius: 12px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .itr {
        margin-top: 10px;
        margin-left: 15px;
        color: white;
        .title {
          font-size: 16px;
        }
        .author {
          display: flex;
          margin-top: 16px;
          align-items: center;
          color: rgba(255, 255, 255, 0.4);
          .facebox {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 5px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
  .listbottombox {
    padding-bottom: 77px !important;
    padding: 0 16px;
    .van-list {
      .itembox {
        .libigbox {
          color: rgba(255, 255, 255, 0.5);
          display: flex;
          align-items: center;
          height: 54px;
          margin-top: 29px;
          .number {
            font-size: 14px;
            margin-right: 16px;
          }
          .songsdetailbox {
            font-size: 18px;
            .songsname {
              color: white;
            }
            .songsauthor {
              font-size: 12px;
              display: flex;
            }
          }
        }
      }
    }
  }
}
</style>